import React, { CSSProperties } from 'react';
import s from './index.less';
import arrowLeftBlack from '@/assets/images/common/arrow-left-black.png';
import arrowLeft from '@/assets/images/common/arror-left.png';
import { history } from 'umi';
import { cc } from '@/utils';

type XzNavProps = {
  title: string;
  onBack?: () => void;
  /*
   * 以下属性皆为预留属性
   * */
  /* 右侧icon按钮 */
  rightIcon?: React.ReactNode;
  /* 是否透明背景 */
  isTransparent?: boolean;
  /* 颜色模式 : 暗色， 亮色， 自定义颜色 */
  mode?: 'dark' | 'light';
  style?: CSSProperties;
};

const XzNav: React.FC<XzNavProps> = (props) => {
  const handleBack = () => {
    if (props.onBack) {
      props.onBack();
    } else {
      history.goBack();
    }
  };

  /*
   * 计算导航栏头部背景颜色
   * */
  const compBackground = () => {
    if (props.isTransparent) {
      return {
        ...props.style,
        background: 'transparent',
      };
    }
  };

  return (
    <section className={s.xz_nav} style={compBackground()}>
      <section onClick={() => handleBack()} className={s.back_img_wrapper}>
        <img
          className={s.back_img}
          src={props.mode === 'light' ? arrowLeft : arrowLeftBlack}
          alt="返回， back"
        />
      </section>

      <p className={cc(s.title, props.mode === 'light' && s.title_light)}>
        {props.title}
      </p>

      {props.rightIcon}
    </section>
  );
};

export { XzNav, XzNavProps };
